<!DOCTYPE html>
<html ng-app="indexApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jquery-ui.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/sweetalert2.css" rel="stylesheet">
    <style>
        .data-viewer {
            font-family: "courier new", arial, sans-serif;
            font-size: 12px;
        }

        .focus {
            background-color: #00AEAE;
            color: #FFFFFF;
        }
    </style>

    <script src="js/angular/1.6.3/angular.js"></script>
    <script src="js/angular/1.6.3/angular-route.js"></script>
    <script src="js/angular/1.6.3/angular-ui-router.js"></script>
    <script src="js/angular/1.6.3/angular-file-upload.js"></script>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/dark.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/sweetalert.min.js"></script>
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    <script src="js/ie-emulation-modes-warning.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/echarts-gl.min.js"></script>
    <script src="ng/indexApp.js"></script>
    <script src="ng/Modelling.js"></script>
    <title>建模分析</title>
</head>
<body ng-controller="Modelling">
<div class="container-fluid">
    <div class="" style="height: 20px"></div>
    <span class="btn-info btn-sm " style="display: inline-block"  disabled="">任务管理
    </span>
    <span class="glyphicon glyphicon-chevron-right" style="color: #8c8c8c"></span>
    <span class="btn-info btn-sm " style="display: inline-block" disabled="">数据集
    </span>
    <span class="glyphicon glyphicon-chevron-right" style="color: #8c8c8c"></span>
    <span class="btn-info btn-sm " style="display: inline-block" disabled="">数据预处理
    </span>
    <span class="glyphicon glyphicon-chevron-right" style="color: #8c8c8c"></span>
    <span class="btn-info btn-sm " style="background-color: #00a4e7;display: inline-block">数据建模
    </span>
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="btn-info btn-sm " style="display: inline-block" disabled="">预测分析
    </span>
    <h3 class="page-header" style="">建模分析

        <div style="float: right" class="btn-group">
            <a type="button"
               class="btn btn-info btn-sm" style="margin-right: 5px"
               href="MLdataPRE.html"><span class="glyphicon glyphicon-arrow-left"></span>&nbsp;数据预处理
            </a>
            <a type="button"
               class="btn btn-info btn-sm"
               href="ana-task-create-manage.html"><span class="glyphicon glyphicon-arrow-left"></span>&nbsp;任务管理
            </a>
        </div>
    </h3>

    <div class="row">
        <div class="col-sm-8 col-md-8">
            <div class="alert alert-info alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>说 明</strong> 请选择特定的模型对数据集进行建模分析。
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">模型选择</div>
                <div class="panel-body">
                    <div class="row" ng-show!="mysqlDbInfoVisible">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">选择</div>
                                <div class="panel-body">
                                    <div class="col-md-3">
                                        <select ng-model="modelIndex"
                                                ng-init="modelIndex = 0"
                                                ng-change="switchModel()"
                                                class="form-control" style="width: 100%;">
                                            <option ng-repeat="x in ModelList" value="{{$index}}">{{x}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 任务列表 -->
    <div class="row" ng-show="RFshow">
        <div class="col-sm-12 col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">随机森林</div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">参数配置</div>
                                <div class="panel-body">
                                    <form class="form-horizontal">
                                        <div class="form-group form-group-sm" >

                                            <label for="currentTask-taskId"
                                                   class="col-sm-2 control-label"></label>

                                            <div class="col-md-3">
                                                <label style="margin-top: 5px">n_estimators(森林里（决策）树的数目)</label>
                                                <input type="text" class="form-control" id="currentTask-taskId"
                                                       placeholder="n_estimators(森林里（决策）树的数目)" ng-model="currentTask.n_estimators" >
                                            </div>
                                            <div class="col-md-3">
                                                <label style="margin-top: 5px">criterion(衡量分裂质量的性能函数)</label>
                                                <input type="text" class="form-control" id="currentTask-name"
                                                       placeholder="criterion(衡量分裂质量的性能函数)" ng-model="currentTask.criterion" >
                                            </div>
                                            <div class="col-md-3">
                                                <label style="margin-top: 5px">max_depth(树的最大深度)</label>
                                                <input
                                                        type="text" class="form-control"
                                                        ng-model="currentTask.max_depth" placeholder="max_depth(树的最大深度)" >
                                            </div>


                                        </div>

                                        <div class="form-group form-group-sm">
                                            <!--
                                            <label for="currentTask-description"
                                                   class="col-sm-2 control-label">任务描述</label>
                                                   -->
                                            <label for="currentTask-taskId"
                                                   class="col-sm-2 control-label"></label>
                                            <div class="col-md-3" >
                                                <label style="margin-top: 5px">random_state(随机种子)</label>
                                                <input
                                                        type="text" class="form-control"
                                                        ng-model="currentTask.random_state" placeholder="random_state" >

                                            </div>
                                            <div class="col-md-3" >
                                                <label style="margin-top: 5px">bootstrap(是否使用有放回抽样)</label>
                                                <input
                                                        type="text" class="form-control"
                                                        ng-model="currentTask.bootstrap" placeholder="bootstrap(是否使用有放回抽样)" >
                                            </div>
                                            <div class="col-md-3" >
                                                <label style="margin-top: 5px">oob_score(是否使用袋外样本来估计泛化精度)</label>
                                                <input
                                                        type="text" class="form-control"
                                                        ng-model="currentTask.oob_score" placeholder="oob_score(是否使用袋外样本来估计泛化精度)" >
                                            </div>

                                        </div>
                                        <div class="form-group form-group-sm">
                                            <div class="col-md-4" style="float: right;margin: auto;">
                                                <button type="button" class="btn btn-sm btn-info"
                                                        ng-click="startModelling()">
                                                    建模分析
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">建模结果分析</div>
                                <div class="panel-body">
                                    <div class="col-md-2" style="margin-top: 10px;float: right;">
                                        <label style="margin-top: 5px">RandomForest Train score</label>
                                        <input type="text" class="form-control"
                                               placeholder="准确率" ng-model="TrainScore" readonly>
                                        <label style="margin-top: 5px">RandomForest Test score</label>
                                        <input type="text" class="form-control"
                                               placeholder="准确率" ng-model="TestScore" readonly>
                                    </div>
                                    <div class="col-md-12" style="margin-top: 10px">
                                        <div class="col-md-6">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    训练集预测结果
                                                </div>
                                                <div id="trainsetChart" style="width: 550px;height:400px;" ></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    测试集预测结果
                                                </div>
                                                <div id="testsetChart" style="width: 550px;height:400px;" ></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" ng-show="KMshow">
        <div class="col-sm-12 col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">Kmeans聚类</div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">参数配置</div>
                                <div class="panel-body">
                                    <form class="form-horizontal">
                                        <div class="form-group form-group-sm" >

                                            <label for="currentTask-taskId"
                                                   class="col-sm-2 control-label"></label>

                                            <div class="col-md-3">
                                                <label style="margin-top: 5px">n_clusters(class的个数)</label>
                                                <input type="text" class="form-control"
                                                       placeholder="n_clusters" ng-model="KmeansTask.n_clusters" >
                                            </div>
                                            <div class="col-md-3">
                                                <label style="margin-top: 5px">max_inter(最大的iteration次数)</label>
                                                <input type="text" class="form-control"
                                                       placeholder="max_inter" ng-model="KmeansTask.max_inter" >
                                            </div>
                                            <div class="col-md-3">
                                                <label style="margin-top: 5px">init(初始化方法)</label>
                                                <input
                                                        type="text" class="form-control"
                                                        ng-model="KmeansTask.init" placeholder="init" >
                                            </div>


                                        </div>

                                        <div class="form-group form-group-sm">
                                            <!--
                                            <label for="currentTask-description"
                                                   class="col-sm-2 control-label">任务描述</label>
                                                   -->
                                            <label for="currentTask-taskId"
                                                   class="col-sm-2 control-label"></label>
                                            <div class="col-md-3" >
                                                <label style="margin-top: 5px">random_state(随机种子)</label>
                                                <input
                                                        type="text" class="form-control"
                                                        ng-model="KmeansTask.random_state" placeholder="random_state" >

                                            </div>
                                            <div class="col-md-3" >
                                                <label style="margin-top: 5px">n_init(尝试用n_init个初始化值进行拟合)</label>
                                                <input
                                                        type="text" class="form-control"
                                                        ng-model="KmeansTask.n_init" placeholder="n_init" >
                                            </div>

                                        </div>
                                        <div class="form-group form-group-sm">
                                            <!--
                                            <label for="currentTask-description"
                                                   class="col-sm-2 control-label">任务描述</label>
                                                   -->
                                            <label for="currentTask-taskId"
                                                   class="col-sm-2 control-label">PCA降维</label>
                                            <div class="col-md-3" >
                                                <button type="button" class="btn btn-sm btn-warning"
                                                        ng-click="pcaSet()">
                                                    使用PCA降维
                                                </button>
                                            </div>
                                        </div>
                                        <div class="form-group form-group-sm">
                                            <!--
                                            <label for="currentTask-description"
                                                   class="col-sm-2 control-label">任务描述</label>
                                                   -->
                                            <label for="currentTask-taskId"
                                                   class="col-sm-2 control-label"></label>
                                            <div class="col-md-3" ng-show="pcaShow">
                                                <label style="margin-top: 5px">映射维数K</label>
                                                <input
                                                        type="text" class="form-control"
                                                        ng-model="pcaK" placeholder="映射维数K" >
                                            </div>
                                        </div>
                                        <div class="form-group form-group-sm">
                                            <div class="col-md-4" style="float: right;margin: auto;">
                                                <button type="button" class="btn btn-sm btn-info"
                                                        ng-click="KmeansModelling()">
                                                    建模分析
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" ng-show="taskOuputDivVisible">
                        <div class="col-sm-12 col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">任务输出</div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">聚类类别标签</div>
                                                <div class="panel-body">
                                                    <table class="table table-bordered table-condensed">
                                                        <thead>
                                                        <tr>
                                                            <th>ID</th>
                                                            <th>原始标签</th>
                                                            <th>新标签</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr ng-repeat="(key, value) in classMap">
                                                            <td>{{key}}</td>
                                                            <td>{{value}}</td>
                                                            <td><input type="text" class="form-control"
                                                                       ng-model="newValue" ng-blur="setLabelInput(key, newValue)"></td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                    <button type="button" class="btn btn-sm btn-default btn-success"
                                                            ng-click="saveClusteringLabels()">保存新定义标签
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-default"
                                                            ng-click="getFeaturesData()">{{featurePanelState}}类别特征
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-default"
                                                            ng-click="getClusteringOutputRawData()" ng-disabled="!saveLabel">{{outputPanelState}}输出数据
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-default"
                                                            ng-click="showClusterPredict()" ng-disabled="!saveLabel">{{predictPanelState}}类别预测
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-default"
                                                            ng-click="getDataVisualization()">{{visualizationState}}数据可视化
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" ng-show="dataFeaturesDivVisible">
                                        <div class="col-md-12">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">聚类类别特征</div>
                                                <div class="panel-body">
                                                    <table
                                                            class="table table-bordered table-striped table-condensed table-hover"
                                                    >
                                                        <thead>
                                                        <tr class="default">
                                                            <th rowspan="2">类别</th>
                                                            <th ng-repeat="colName in featureMeta" colspan="3">{{colName}}</th>
                                                        </tr>
                                                        <tr class="default" ng-bind-html="thHtml |trustHtml">
                                                        </tr>
                                                        </thead>
                                                        <tbody ng-bind-html="featuresHtml |trustHtml">
                                                        </tbody>

                                                    </table>

                                                    <div class="col-md-6" ng-repeat="colName in featureMeta">

                                                        <feature-chart id="main{{$index}}" data="featuresRawData" meta="featureMeta"
                                                                       label="nowclassMap"
                                                                       style="margin-bottom: 20px;"></feature-chart>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" ng-show="dataOuputDivVisible">
                                        <div class="col-md-12">
                                            <!--	<textarea class="form-control data-viewer" id="taskDescription"
                                                    rows="15" placeholder="输出数据"
                                                    ng-model="currentTaskOutputRawData"></textarea>
                                                    -->
                                            <div class="panel panel-default">
                                                <div class="panel-heading">聚类输出数据抽样显示</div>
                                                <div class="panel-body">
                                                    <table class="table table-bordered table-condensed table-hover">
                                                        <caption>预处理数据表 {{currentMySQLTablePre.name}} 的数据样例</caption>
                                                        <thead>
                                                        <tr>
                                                            <th>No</th>

                                                            <th ng-repeat="key in tableItemPre"
                                                                ng-style="{'background-color':key=='PREDICT_LABEL'?'#0bfffc':''}"
                                                                style="min-width: 80px;max-width:300px;word-wrap: break-word">
                                                                {{key}}
                                                            </th>

                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr ng-repeat="item in mysqlTableSampleDataPre">
                                                            <td>{{$index+1}}</td>
                                                            <td ng-repeat="key in countItemPre"
                                                                ng-style="{'background-color':key==0 ?'#0bfffc':''}"
                                                                style="min-width: 80px;max-width:300px;word-wrap: break-word">
                                                                {{item[key]|limitTo:10}}
                                                            </td>
                                                        </tr>
                                                        <tbody>
                                                    </table>
                                                </div>
                                                <!--<div class="panel-footer" align="left" style="height: 55px">
                                                    <ul class="pagination" style="margin-top: 0px">
                                                        <li>
                                                            <a ng-click="Previous()">
                                                                <span>上一页</span>
                                                            </a>
                                                        </li>
                                                        <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
                                                            <a ng-click="selectPage(page)">{{ page }}</a>
                                                        </li>
                                                        <li>
                                                            <a ng-click="Next()">
                                                                <span>下一页</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>-->
                                            </div>

                                        </div>
                                    </div>
                                    <div class="row" ng-show="clusterPredictedPanelVisible">
                                        <div class="col-md-12">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">类别预测</div>
                                                <div class="panel-body">
                                                    <div class="row">
                                                        <div ng-repeat="colName in featureMeta" class="col-md-2">
                                                            <input type="text" class="form-control" id="{{colName}}"
                                                                   ng-model="$parent.pointToPredict[$index]"
                                                                   placeholder="{{colName}}">
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-2">
                                                            <button type="button" class="btn btn-sm btn-default"
                                                                    ng-click="clusterPredict(pointToPredict, currentTask)"
                                                                    style="margin-top: 20px">类别预测
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <p ng-show="clusterPredictedDivVisible" style="margin-top: 20px">
                                                        根据聚类结果，预测出该条数据的类别为：{{predictedCluster}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="panel panel-default" ng-show="clusterPredictedDivVisible">
                                                <div class="panel-heading">用户画像:{{predictedCluster}}</div>
                                                <div class="panel-body">
                                                    <radar id="radarChart" point="pointToPredict"
                                                           meta="featureMeta" features="featuresRawData" label=predictedCluster
                                                           style="margin-top: 20px"></radar>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" ng-show="kmeansShow">
                                        <div class="col-md-12">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">聚类分析</div>
                                                <div class="panel-body">
                                                    <div class="col-md-7">
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading">
                                                                三维图展示
                                                            </div>
                                                            <div id="3DChart" style="width: 600px;height:700px;margin-left: 10px" ></div>
                                                        </div>
                                                    </div>
                                                    <label
                                                            class="col-sm-2 control-label" style="margin-top: 15px" >calinski_harabaz_score</label>
                                                    <div class="col-md-3" style="margin-top: 10px">
                                                        <input type="text" class="form-control"
                                                               placeholder="calinski_harabaz_score" ng-model="score" readonly>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>